
define(["jquery"], function () {
    'use strict';
    class Banner {
        constructor(pInterval = 3000) {
            this.bannerContainer = $(".bannerContainer");
            this.container = $(".box");
            this.btnPrv = $("#btn-prev");
            this.btnNext = $("#btn-next");
            this.pagination = $(".banner_pagination");
            this.timer = null;
            this.index = 0;
            this.intervalTime = pInterval;
        }
        bindEvent() {
            this.btnPrv.on("click", $.proxy(this.toPrev, this));
            this.btnNext.on("click", $.proxy(this.toNext, this));
            this.bannerContainer.on("mouseenter", $.proxy(this.stopTimer, this));
            this.bannerContainer.on("mouseleave", $.proxy(this.startTimer, this));
        }
        changeIndex(isNext) {
            this.index = isNext ? this.index + 1 : this.index - 1;
            if (this.index >= this.container.children().length) {
                this.index = 0;
            }
            else if (this.index <= 0) {
                this.index = this.container.children().length - 1;
            }
        }
        changePage(index) {
            let items = this.container.children();
            $.each(items, (n, item) => {
                $(item).css({
                    display: `${n === index ? "block" : "none"}`,
                })
            })
        }
        changePageSub(index) {
            let subs = this.pagination.children();
            $.each(subs, (n, item) => {
                $(item).removeClass();
                if (n === index) {
                    $(item).addClass("iconfont iconbanner icon-quanzi");

                } else {
                    $(item).addClass("iconfont iconbanner icon-dian");
                };

            });
        }
        toNext() {

            this.changeIndex(true);
            this.changePage(this.index);
            this.changePageSub(this.index);
        }
        toPrev() {
            this.changeIndex(false);
            this.changePage(this.index);
            this.changePageSub(this.index);
        }

        toPage() {
            this.changePage(this.index);
            this.changePageSub(this.index);
        }
        creatPage() {
            let count = this.container.children().length;
            let frag = document.createDocumentFragment();
            for (let i = 0; i < count; i++) {
                let elem = $("<i></i>")
                .css({
                    cursor:"pointer"
                });

                elem.addClass("iconfont iconbanner icon-dian");
                elem.on("click",this.onSubBtnClick.bind(this,i));//$.proxy(this.onSubBtnClick,this)
                $(frag).append(elem);
            }
            this.pagination.append(frag);
        }
        onSubBtnClick(index){
            this.index=index;
            this.toPage();
        }
        startTimer() {
            this.stopTimer();
            this.timer = setInterval(() => {
                this.toNext();
            }, this.intervalTime);
        }
        stopTimer() {
            clearInterval(this.timer);
        }
        init() {
            this.creatPage();
            this.startTimer();
            this.bindEvent();
            this.toNext();
        }
    }
    return Banner;








    //swiper
    // require(["swiper"],function(Swiper){
    //     $(document).ready(function () {
    //         init();
    //     })
    //     function init() {
    //         var mySwiper = new Swiper('.swiper-container', {
    //             // direction: 'horization', // 垂直切换选项
    //             autoplay : 1000,
    //             loop: true, // 循环模式选项

    //             // 如果需要分页器
    //             pagination: {
    //                 el: '.swiper-pagination',
    //             },

    //             // 如果需要前进后退按钮
    //             navigation: {
    //                 nextEl: '.swiper-button-next',
    //                 prevEl: '.swiper-button-prev',
    //             },

    //             // 如果需要滚动条
    //             scrollbar: {
    //                 el: '.swiper-scrollbar',
    //             },
    //         })
    //     }
    // })

});